import { NavBar, Button, InfiniteScroll, Switch } from "antd-mobile";
import axios from "axios";
import { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import ListItem from "../../components/listItem";


export function List() {
  const { state } = useLocation();
  const { start, end } = state;
  const [active, setActive] = useState(0);
  const [page, setPage] = useState(1);
  const [list, setList] = useState([]);
  const [isSpeed, setIsSpeed] = useState(false);
  const [isSeat, setIsSeat] = useState(false);
  const navigate = useNavigate()
  const getData = async () => {
    const resp = await axios.post("/api/trip/train", {
      start,
      end,
      page,
      isSpeed,
      isSeat,
    });
    setPage(page + 1);
    setList(list.concat(resp.data.data));
    console.log(resp.data.data);
  };

  useEffect(() => {
    getData();
  }, []);
  return (
    <div>
      <NavBar>
        {start}-{end}
      </NavBar>
      <div style={{ display: "flex", width: "100vw", overflow: "hidden" }}>
       
      </div>
      <div>
        {list.map((v, i) => {
          return <ListItem key={i} v={v} onClick={() => navigate('/detail', { state: v })}></ListItem>;
        })}
      </div>
      <InfiniteScroll loadMore={getData} hasMore={true}></InfiniteScroll>

      <div 
        style={{
          position: "fixed",
          bottom: 0,
          width: "100%",
          display: "flex",
          justifyContent: "space-around",
          backgroundColor: "#fff",
          height: 46,
          alignContent: "center",
        }}
      >
        <div>
          <Switch
            checked={isSeat}
            onChange={() => {
              setIsSeat(!isSeat);
              setList([]);
              setPage(1);
            }}
          ></Switch>{" "}
          有座 {isSeat ? "真" : "假"}
        </div>
        <div>
          <Switch
            checked={isSpeed}
            onChange={() => {
              setIsSpeed(!isSpeed);
              setList([]);
              setPage(1);
            }}
          ></Switch>
          高铁 {isSpeed ? "真" : "假"}
        </div>
      </div>
    </div>
  );
}

export default List;
